var modal = (function(){

		var 
		method = {},
		$overlay = $('<div id="overlay"></div>'),
		$modal = $('<div id="modal"></div>'),
		$content = $('<div id="content"></div>'),
		$close = $('<div id="close"><i class="fa fa-times"></i></div>');
		

		$modal.hide();
		$overlay.hide();
		$modal.append($content, $close);

		$('body').prepend($overlay, $modal);	

		// Append ths HTML

		//Center method to center the modal
		method.center = function(){

			var top, left;

			top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
			left = Math.max($(window).width() -  $modal.outerWidth(), 0) / 2;

			$modal.css({

				top:top + $(window).scrollTop(),
				left:left + $(window).scrollLeft()

			});

		};

		// Open Modal method
		method.open = function (settings) {

			$content.empty().append(settings.content);	

			$modal.css({
				width: settings.width  || 'auto',
				height: settings.height || 'auto',
				background: settings.background
			});	

			method.center();

			$(window).bind('resize.modal', method.center);

			$overlay.fadeIn();
			$modal.fadeIn();
			

		};

		//Close the modal method 
		method.close = function () {
			$overlay.fadeOut();
			$modal.fadeOut();
			//$content.hide();
			$(window).unbind('resize.modal');

		};

		$close.click(function(e){
			e.preventDefault();
			method.close();
		});

		return method;

	}());
